<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    import Map from 'ol/Map';
    import View from 'ol/View';
    import EsriJSON from 'ol/format/EsriJSON';
    import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
    import {Vector as VectorSource} from 'ol/source';
    import { Vector as VectorLayer} from 'ol/layer';
    import axios from 'axios'
    export default {
        name: "EsrijsonLayer",
        mounted() {

            const image = new CircleStyle({
                radius: 5,
                fill: null,
                stroke: new Stroke({
                    color: 'red',
                    width: 1}),
            });

            const styles = {
                'Point': new Style({
                    image: image,
                }),
                'LineString': new Style({
                    stroke: new Stroke({
                        color: 'green',
                        width: 1,
                    }),
                }),
                'MultiLineString': new Style({
                    stroke: new Stroke({
                        color: 'green',
                        width: 1,
                    }),
                }),
                'MultiPoint': new Style({
                    image: image,
                }),
                'MultiPolygon': new Style({
                    stroke: new Stroke({
                        color: 'yellow',
                        width: 1,
                    }),
                    fill: new Fill({
                        color: 'rgba(255, 255, 0, 0.1)',
                    }),
                }),
                'Polygon': new Style({
                    stroke: new Stroke({
                        color: 'blue',
                        lineDash: [4],
                        width: 3,
                    }),
                    fill: new Fill({
                        color: 'rgba(0, 0, 255, 0.1)',
                    }),
                }),
                'GeometryCollection': new Style({
                    stroke: new Stroke({
                        color: 'magenta',
                        width: 2,
                    }),
                    fill: new Fill({
                        color: 'magenta',
                    }),
                    image: new CircleStyle({
                        radius: 10,
                        fill: null,
                        stroke: new Stroke({
                            color: 'magenta',
                        }),
                    }),
                }),
                'Circle': new Style({
                    stroke: new Stroke({
                        color: 'red',
                        width: 2,
                    }),
                    fill: new Fill({
                        color: 'rgba(255,0,0,0.2)',
                    }),
                }),
            };

            const styleFunction = function (feature) {
                return styles[feature.getGeometry().getType()];
            };
            axios.get('http://localhost:8888/openlayer/esrijson/esrijson.json')
                .then((response)=> {
                    //指定数据格式是esrijson
                    let esriJSON = new EsriJSON();
                    let arr = response.data;
                    const vectorSource = new VectorSource();
                    for (const arrElement of arr) {
                        //读取后台响应的esrijson数据，读取要素信息，添加到矢量数据源
                        let feature = esriJSON.readFeature(arrElement);
                        vectorSource.addFeature(feature);
                    }
                    // let feature = esriJSON.readFeatures(arr);
                    // vectorSource.addFeatures(feature);
                    //将矢量图层添加到地图中
                    const vector = new VectorLayer({
                        //矢量数据源
                        source: vectorSource,
                        //样式设置
                        style: styleFunction
                    });

                    this.map = new Map({
                        layers: [vector],
                        target: 'map',
                        view: new View({
                            center: [0, 0],
                            zoom: 5,
                            projection: "EPSG:4326", //指定投影
                        }),
                    });
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
    }
</script>

<style scoped>

</style>